<template>
  <div class="giftBag">
    <div class="header">
      <top-bar :barObj="barObj"/>
    </div>
    <ul v-if="EntityList.length">
      <li v-for="(item,i) in EntityList" :key="i" :index="i">
        <div class="icon">
          <img src="./img/lefttop.png" alt>
        </div>***********************
        <div class="time">{{item.value3.split(' ')[0]}} 到期</div>
        <div
          class="copy"
          v-clipboard:copy="item.value2"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >复制</div>
        <!-- <div v-else class="copy1">复制</div> -->
      </li>
    </ul>
    <ul v-else>
      <li>暂无数据</li>
    </ul>
    <div class="bottom" v-if="EntityList.length">
      <div class="item item1" @click="isDonateMask=true">赠送</div>
      <!-- @click="donate" -->
      <div class="item item2" @click="activateBtn">激活</div>
    </div>
    <div class="mask donateMask" v-if="isDonateMask">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="isDonateMask=false"></div>礼包码赠送
        </div>
        <p>
          <label for="p1">礼包码数量</label>
          <br>
          <input id="p1" type="text" v-model="sendNum" placeholder="输入赠送数量">
        </p>
        <p>
          <label for="p2">赠送用户</label>
          <br>
          <input id="p2" type="text" v-model="sendUserId" placeholder="输入用户ID">
        </p>
        <div class="maskbtn" @click="ifSureSend()">确定</div>
      </div>
    </div>
    <div class="mask donateMask" v-if="isDonateMask1">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="isDonateMask1=false"></div>礼包码激活
        </div>
        <p>
          <label for="p1">激活用户ID</label>
          <br>
          <input id="p1" type="text" placeholder="激活用户ID" v-model="activateUserId">
        </p>
        <p>
          <label for="p2">支付密码</label>
          <br>
          <input id="p2" type="password" placeholder="输入支付密码" v-model="activatePayPws">
        </p>
        <div class="maskbtn" @click="ifSureActivate()">确定</div>
      </div>
    </div>

    <div class="mask sendMask" v-if="isSendMask">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="isSendMask=false"></div>确认赠送
        </div>
        <div class="txt">{{sendtxt}}</div>
        <div class="maskbtn" @click="sureSend()">确定</div>
      </div>
    </div>
    <div class="mask sendMask" v-if="isSendMask1">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="isSendMask1 = false;"></div>确认激活
        </div>
        <div class="txt">{{activeTxt}}</div>
        <div class="maskbtn" @click="sureActive">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { getGuid } from "../../utils/index";
import {
  getGiftBagList,
  sendLivcardAssociator,
  userByPayHY
} from "../../api.js";
import { Toast } from "mint-ui";
import { hex_md5 } from "../../utils/md5.js";

export default {
  components: {
    topBar
  },
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "背包",
        title: "礼包码",
        isIcon: true
      },
      EntityList: "",
      isDonateMask: false,
      isDonateMask1: false,
      isSendMask: false,
      isSendMask1: false,
      sendNum: "",
      sendUserId: "",
      activateUserId: "",
      activatePayPws: "",
      currentItem: -1,
      currentCode: ""
    };
  },
  mounted() {
    //获取列表
    this.getData();
  },
  methods: {
    choose(item, i) {
      this.currentItem = i;
      this.currentCode = item.value2;
    },
    getData() {
      getGiftBagList({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          this.EntityList = res.data.EntityList;
        } else {
          Toast({
            message: res.data.Content,
            duration: 1000
          });
        }
      });
    },
    activateBtn() {
      this.isDonateMask1 = true;
    },
    //确认赠送按钮
    ifSureSend() {
      if (!this.sendNum || !this.sendUserId) {
        Toast({
          message: "填写不完整！",
          duration: 1000
        });
        return;
      }
      this.sendGiftBag(0);
      this.isDonateMask = false;
    },
    //确认激活按钮
    ifSureActivate() {
      if (!this.activateUserId || !this.activatePayPws) {
        Toast({
          message: "填写不完整！",
          duration: 1000
        });
        return;
      }
      this.isDonateMask1 = false;
      this.activateUser(0);
    },
    //确认赠送
    sureSend() {
      this.sendGiftBag(1);
      this.isSendMask = false;
    },
    //确认激活
    sureActive() {
      this.activateUser(1);
      this.isSendMask1 = false;
    },
    //使用礼包码激活用户  YJELQss 0：返回提示 1：确认充值
    activateUser(type) {
      userByPayHY({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        RegType: "2",
        MS: this.activateUserId,
        MC: "",
        YJELQss: type,
        JYEPass: hex_md5(this.activatePayPws)
      }).then(res => {
        if (res.data.Success) {
          if (type == 0) {
            this.isSendMask1 = true;
            this.activeTxt = res.data.Content;
          } else {
            this.getData();
            Toast({
              message: res.data.Content,
              duration: 1000
            });
            this.activateUserId = "";
            this.activatePayPws = "";
          }
        } else {
          Toast({
            message: res.data.Content,
            duration: 1000
          });
        }
      });
    },

    //赠送礼包api  //RegType 0 提示 1赠送
    sendGiftBag(type) {
      console.log(this.sendNum);
      sendLivcardAssociator({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        RegType: type,
        MS: this.sendUserId,
        MC: this.sendNum
      }).then(res => {
        if (res.data.Success) {
          if (type == 0) {
            this.isSendMask = true;
            this.sendtxt = res.data.Content;
          } else {
            this.getData();
            Toast({
              message: res.data.Content,
              duration: 1000
            });
            this.sendUserId = "";
            this.sendNum = "";
          }
        } else {
          Toast({
            message: res.data.Content,
            duration: 1000
          });
        }
      });
    },
    onCopy: function(e) {
      console.log(e);
      Toast({
        message: "复制成功",
        duration: 1000
      });
    },
    onError: function(e) {
      Toast({
        message: "复制失败！",
        duration: 3000
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.giftBag {
  height: 100%;

  .header {
    padding-top: 0.52rem;
    width: 100%;
    height: 2.22rem;
    background: linear-gradient(0deg, rgba(0, 177, 255, 1), rgba(0, 108, 255, 1));
  }

  ul {
    position: relative;
    top: -1rem;
    width: 100%;
    height: calc(100vh - 2.36rem);
    overflow-y: scroll;

    // background: pink;
    li {
      width: 7.1rem;
      height: 1.38rem;
      line-height: 1.38rem;
      font-size: 20px;
      background: #FFF;
      border-radius: 0.2rem;
      margin: 10px auto;
      padding-left: 0.8rem;
      position: relative;

      .icon {
        width: 0.92rem;
        height: 0.78rem;
        position: absolute;
        left: 0;
        top: 0;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .copy {
        width: 1.26rem;
        height: 0.44rem;
        line-height: 0.44rem;
        font-size: 13px;
        background: rgba(0, 108, 255, 1);
        border-radius: 0.1rem;
        position: absolute;
        right: 0.32rem;
        top: 0.42rem;
        color: #fff;
        text-align: center;
      }

      .copy1 {
        width: 1.26rem;
        height: 0.44rem;
        line-height: 0.44rem;
        font-size: 13px;
        background: #3d3b45;
        border-radius: 0.1rem;
        position: absolute;
        right: 0.32rem;
        top: 0.42rem;
        color: #fff;
        text-align: center;
      }

      .time {
        position: absolute;
        right: 2.12rem;
        top: 0.42rem;
        font-size: 12px;
      }
    }
  }

  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;

    .main {
      width: 7.04rem;
      height: 6.94rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        .iconfont {
          position: absolute;
          left: 15px;
          font-size: 20px;
        }

        width: 6.63rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 16px;
        border-bottom: 1px solid rgba(137, 137, 137, 1);
        margin: 0 auto;
      }

      p {
        width: 5.5rem;
        margin: 0.6rem auto;
        text-align: left;
        line-height: 0.66rem;

        label {
          color: rgba(255, 105, 51, 1);
        }

        input {
          width: 100%;
          height: 0.66rem;
          background: rgba(215, 215, 215, 1);
          border-radius: 6px;
          padding-left: 0.2rem;
        }

        input::placeholder {
          color: #fff;
        }
      }
    }
  }

  .sendMask {
    .txt {
      margin: 1.25rem;
      line-height: 0.6rem;
      color: rgba(20, 20, 20, 1);
      word-break: break-all;
    }
  }

  .bottom {
    width: 100%;
    height: 1.16rem;
    line-height: 1.16rem;
    text-align: center;
    background: #FFF;
    color: rgba(61, 59, 69, 1);
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 18px;

    .item {
      flex: 1;
    }

    .item2 {
      background: rgba(61, 59, 69, 1);
      color: #fff;
    }
  }

  .maskbtn {
    width: 6.18rem;
    height: 1rem;
    line-height: 1rem;
    background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
    box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
    border-radius: 0.1rem;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;
  }
}
</style>

